<template>
	<view class="bankCard">
	
		<!-- <view class="delete-card-btn" v-if="deleteCardShow" @click="deleteCard()">删除银行卡</view> -->
		<!-- <view class="add-bank-card" v-if="bankDate==false" @click="addBankCard()">
			<image src="/static/images/add-card-icon.png" mode=""></image>
			<view>添加银行卡</view>
		</view> -->
		<view class="txyk">提现用卡</view>
		<view class="withdrawal-card" v-if="bankDate==false">
			<view class="zz"></view>
			<view class="kt" @click="addBankCard()">开通快捷支付</view>
			
		</view>
		<view class="withdrawal-card" v-else>
			<view class="withdrawal-card-top">
				<view class="withdrawal-logo">
					<image :src="bankDate.logo" class="logo"   mode=""></image>
				</view>
				
				<view class="logo-text">{{bankDate.bank_name}}</view>
				<image src="/static/images/more.png" class="more"   mode="" @click="showEdit"></image>
			</view>
			<view class="withdrawal-card-center">
				<view>持卡人</view>
				<view>银行卡号</view>
			</view>
			<view class="withdrawal-card-bottom">
				<view>{{bankDate.real_name}}</view>
				<view>{{bankDate.cert_number}}</view>
			</view>
			
		</view>
		<uni-popup ref="cardpopup" type="bottom">
			<view class="card-box">
				<view @click="unbind()">解除绑定 </view>
				<view @click="close()">取消</view>
			</view>
		</uni-popup>
		<!-- <view class="webtips" v-if="!deleteCardShow">--此网页由<text style="margin:0 10rpx">shopwap.littleshop.shop</text>提供--</view> -->
		
	</view>
</template>

<script>
	/* function getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1);
				let strs = str.split('&');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return requestParams;
	}
	let params = getRequestParams();
	let token = params['token'];
	let status_bar =  params['status_bar'];
	let source = 'wap'
	if(token!=undefined){
		uni.setStorage({
		    key: 'token',
		    data: token
		})
		source = 'app'
	}
	if(status_bar!=undefined){
		uni.setStorage({
		    key: 'status_bar',
		    data: status_bar
		})
	} */
	import store from "store"
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	import { getBankCards,deleteBankCard } from 'api/userAccountApi'
	export default {
		store,
		computed:{
			...mapGetters([
				'statusBar'
			])
		},
		data(){
			return {
				hasBg:false,
				choiceIndex:1,
				deleteCardShow:false,
				cardList:[],
				deleteCardList:[],
				source:'wap',
				bankDate:false
			}
		},
		methods:{
			...mapMutations([
				'setUser',
				'setStatusBar'
			]),
			edit(){
				this.deleteCardShow = !this.deleteCardShow
				let list = this.cardList
				list.forEach((ele,index)=>{
					ele.choiced = false
				})
				this.cardList = list
			},
			addBankCard(){
				uni.navigateTo({
					url:'/packs/pages/withdrawal/addBankCard'
				})
			},
			showEdit() {
				this.$refs.cardpopup.open('bottom')
			},
			close() {
				this.$refs.cardpopup.close()
			},
			unbind() {
				uni.showModal({
				  title: '提示',
				  content: '确定要解除绑定吗？',
				  success: async (res) => {
				    if (res.confirm) {
				      let response= await deleteBankCard()
					  this.$refs.cardpopup.close();
					  this.bankDate = false;
				      uni.showToast({title: '解绑成功', duration: 2000, icon: 'success'})
				    }
				  }
				})
				
			},
			back(){
				
				uni.navigateBack()
				
				
			},
			choiceCard(index,id){
				this.cardList[index].choiced = !this.cardList[index].choiced;
				if(this.cardList[index].choiced){
					this.deleteCardList.push(id)
				}else{
					this.deleteCardList.splice(index,1)
				}
			},
		    onlyfour(value){
				if (value && value.length > 8) {
					return `${"*".repeat(value.length - 8)}${value.length % 4 ? " " : ""}${value.slice(-4)}`;
				}
				
				return value;
				
			},
			getBankCards(){
				getBankCards().then(res=>{
					if(!res.message){
						if(res.cert_number!=''){
							this.bankDate = res
							this.bankDate.logo ="https://yangfubing.gitee.io/bank.logo/resource/logo/"+ this.bankDate.bank_abbr +".png";
							this.bankDate.cert_number = this.onlyfour(this.bankDate.cert_number);
							
						}else{
							this.bankDate = false
						}
					}
				})
			},
			deleteCard(){
				let parms = {
					card_ids:this.deleteCardList
				}
				deleteBankCard(parms).then(res=>{
					this.getBankCards()
					this.deleteCardShow = false
					uni.showToast({
						title:'删除成功！'
					})
				})
			}
		},
		async onReady(){
			console.log(123);
			this.getBankCards()
			
		}
		
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
	}
	.txyk{
		margin-top:30rpx;
		margin-left:28rpx;
		font-size:32rpx;
		color:#000;
		
	}
	.withdrawal-card{
		
		width:718rpx;
		height:282rpx;
		margin:24rpx auto 0rpx;
		border:10rpx;
		background:#C15356;
		position:relative;
		.zz{
			width:100%;
			height:100%;
			background:#000;
			opacity: 0.39;
			display:flex;
			
		}
		.kt{
			background:#fff;
			width:282rpx;
			height:70rpx;
			border-radius:54rpx;
			z-index:999;
			color:#709AF8;
			text-align:center;
			font-size:32rpx;
			line-height:70rpx;
			position:absolute;
			top:106rpx;
			left:218rpx;
			
		}
		.withdrawal-card-top{
			overflow:hidden;
			.withdrawal-logo{
				width:80rpx;
				height:80rpx;
				line-height:100rpx;
				text-align:center;
				border-radius:50%;
				background:#fff;
				opacity: 0.75;
				margin-left:24rpx;
				margin-top:16rpx;
				float:left;
				.logo{
					width:48rpx;
					height:48rpx;
				}
			}
			.logo-text{
				float:left;
				margin-top:38rpx;
				color:#fff;
				font-size:26rpx;
				margin-left:18rpx;
			}
			.more{
				float:right;
				margin-right:36rpx;
				margin-top:26rpx;
				width:12rpx;
				height:42rpx;
			}
		}
		.withdrawal-card-center{
			margin-top:28rpx;
			font-size:24rpx;
			color:#fff;
			display:flex;
			>view:nth-child(1){
				margin-left:24rpx;
			}
			>view:nth-child(2){
				margin-left:142rpx;
			}
		}
		.withdrawal-card-bottom{
			margin-top:22rpx;
			font-size:36rpx;
			color:#fff;
			display:flex;
			position:relative;
			>view:nth-child(1){
				margin-left:24rpx;
			}
			>view:nth-child(2){
				position:absolute;
				left:238rpx;
			}
			
		}
	}
	.card-box{
		
		height:256rpx;
		width:100%;
		background:#fff;
		border-radius:20rpx;
		font-size:30rpx;
		text-align:center;
		>view:nth-child(1){
			height:122rpx;
			line-height:122rpx;
			border-bottom:2rpx solid #f2f2f2;
			color:#333;
			
		}
		>view:nth-child(2){
			height:134rpx;
			line-height:134rpx;
			color:#999;
			
		}
	}
	
</style>
